<template>
  <div>
    <div>
      <el-form
        :model="account"
        label-width="88px"
        label-position="left"
        style="width: 90%"
        :rules="rules"
        ref="accountForm"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="上级科目" prop="parentId">
              <account-select
                v-model="account.parentId"
                :disabled="!!account.id || !!parentId"
                @change="handleParentChange"
              ></account-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编码" prop="code">
              <el-input
                v-model="account.code"
                :disabled="!!account.id && !account.isLeaf"
              >
                <template slot="prepend" v-if="account.parentId">{{
                  parentCode
                }}</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="account.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="方向" prop="direction">
              <el-radio-group v-model="account.direction">
                <el-radio :label="1">借</el-radio>
                <el-radio :label="-1">贷</el-radio>
              </el-radio-group>
            </el-form-item></el-col
          >
        </el-row>
        <el-row :gutter="20" v-show="account.isLeaf">
          <el-col :span="12">
            <el-form-item label="资金科目" prop="isFundAccount">
              <el-switch v-model="account.isFundAccount"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="外币核算" prop="isForeignCurrency">
              <el-switch
                v-model="account.isForeignCurrency"
              ></el-switch> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" v-show="account.isFundAccount">
            <el-form-item label="银行账号" prop="bankAccountId">
              <bank-select
                v-model="account.bankAccountId"
              ></bank-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="启用" prop="activated">
              <el-switch v-model="account.activated"></el-switch> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
    </div>
    <div style="margin-top: 20px" v-if="account.isLeaf">
      <el-card class="box-card" size="small" shadow="never">
        <div slot="header" class="clearfix">
          <span>核算维度</span>
          <span style="float: right; margin-right: 10px"
            ><el-link @click="handleDimensionEdit" type="primary"
              >新增</el-link
            ></span
          >
        </div>
        <vxe-table
          border
          size="small"
          resizable
          show-overflow
          ref="dimensionTable"
          :data="account.dimensionItems"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
        >
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="名称" :edit-render="{}">
            <template v-slot="{ row }">
              {{ row.dimensionName }}
            </template>
            <template v-slot:edit="{ row }">
              <demension-select
                optionClass="vxe-table–ignore-clear"
                v-model="row.dimensionId"
                @change="(item) => handleDimensionChange(row, item)"
              ></demension-select>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="isRequire"
            title="必录"
          >
            <template v-slot="{ row }">
              <el-radio-group v-model="row.isRequire">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="activated"
            title="启用"
          >
            <template v-slot="{ row }">
              <el-checkbox v-model="row.activated"></el-checkbox>
            </template>
          </vxe-table-column>
          <vxe-table-column>
            <template v-slot="{ row }">
              <el-link @click="() => handleDimensionRemove(row)" type="primary"
                >移除</el-link
              >
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel" size="small">取消</el-button>
      <el-button type="primary" @click="handleSave" size="small"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
import accountSelect from "@/components/Select/accountSelect.vue";
import bankSelect from "@/components/Select/bankSelect.vue";
import demensionSelect from "@/components/Select/dimensionSelect.vue";

import { getAccount, addAccount, updateAccount } from "@/api/account";
export default {
  components: {
    accountSelect,
    bankSelect,
    demensionSelect,
  },
  data() {
    return {
      account: {
        parentId: null,
        code: null,
        name: null,
        accountType: null,
        isFundAccount: false,
        bankAccountId: null,
        isForeignCurrency: null,
        direction: 1,
        dimensionItems: [],
        isLeaf: true,
        activated: true,
      },
      parent: {},
      rules: {
        code: [{ required: true, message: "请填写编码", trigger: "blur" }],
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
      },
      parentCode: "",
    };
  },
  methods: {
    getData() {
      if (!this.id) {
        this.account.parentId = this.parentId;
        return;
      }
      getAccount(this.id).then((res) => {
        this.account = res;
      });
    },
    getParent() {
      if (!this.parentId) return;
      getAccount(this.parentId).then((res) => {
        this.parent = res;
        this.hanldeChangeAcount({ id: this.parentId, node: this.parent });
      });
    },
    hanldeChangeAcount({ id, node }) {
      if (!node) {
        this.account.parentId = null;
        this.account.code = null;
        this.parentCode = "";
        this.account.accountType = null;
        return;
      }

      this.account.parentId = node.id;
      this.account.accountType = node.accountType;
      this.account.dimensionItems = node.dimensionItems;
      this.direction = node.direction;
      this.isForeignCurrency = node.isForeignCurrency;
      this.parentCode = node.code + ".";
    },
    handleCancel() {
      this.$emit("close");
    },
    handleSave() {
      this.$refs.accountForm.validate((valid) => {
        if (valid) {
          this.saveData();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveData() {
      if (this.account.id) {
        updateAccount(this.account).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          this.$emit("success", res);
        });
      } else {
        addAccount(this.account).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          this.$emit("success", res);
        });
      }
    },
    handleParentChange({ id, node }) {
      this.parentCode = node.code;
      this.account.parentId = id;
      this.account.isForeignCurrency = node.isForeignCurrency;
      this.account.isFundAccount = node.isFundAccount;
      this.account.bankAccountId = node.bankAccountId;
      this.account.dimensionItems = node.dimensionItems;
      this.account.direction = node.direction;
      this.account.accountType = node.accountType;
    },
    handleDimensionChange(row, item) {
      row.dimensionName = item.name;
    },
    handleDimensionEdit() {
      let dimensionItem = this.defaultDimensionItem();

      this.$refs.dimensionTable.insertAt(dimensionItem, -1);
      this.account.dimensionItems.push(dimensionItem);
    },
    handleDimensionRemove(row) {
      this.account.dimensionItems.remove(row);
    },
    defaultDimensionItem() {
      return {
        id: "",
        accountId: this.account.id,
        dimensionId: "",
        dimensionName: "",
        isRequire: false,
        activated: true,
      };
    },
  },
  mounted() {
    this.getData();
    this.getParent();
  },
  computed: {},
  props: {
    id: {
      type: String,
      default: null,
    },
    parentId: {
      type: String,
      default: null,
    },
  },
};
</script>
<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 10px;
}
</style>
